<template>
  <section class="ui-breadcrumb">
    <h3>{{ breadList[breadList.length - 1].meta.title }}</h3>
  </section>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'breadcrumb',
  props: {
    separator: {
      type: String,
      default: '/'
    }
  },
  computed: mapState({
    breadList: state => state.breadList,
    fullPath: state => state.fullPath
  }),
  mounted () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  padding: 0.15rem 0.2rem;
}
h3 {
  position: relative;
  margin: 0.1rem 0.2rem;
  padding: 0 0 0 0.15rem;
  font-size: 0.18rem;

  &:before {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.05rem;
    height: 0.14rem;
    transform: translate(0, -50%);
    content: '';
    border-left: 0.05rem solid #1ae1e6;
  }
}
</style>
